'use strict';

const glob = require("glob");
const path = require("path");
const miniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const htmlWebExternalPlugin = require("html-webpack-externals-plugin");

const setMPA = ()=> {
    const entry = {};
    const htmlWebpackPlugins = [];

    const entryFiles = glob.sync(path.join(__dirname,'./src/*/index-server.js'));
    // console.log('entryFiles',entryFiles);

    Object.keys(entryFiles)
        .map((index) => {
            const entryFile = entryFiles[index];
            
            const match = entryFile.match(/src\/(.*)\/index-server\.js/);
            const pageName = match && match[1];
            
            entry[pageName] = entryFile;
            
            if(pageName){
                htmlWebpackPlugins.push(
                    new HtmlWebpackPlugin({
                        template:path.join(__dirname,`./src/${pageName}/index.html`),
                        filename:`${pageName}.html`,
                        chunk:['vendors',pageName],
                        inject:true,
                        minify:{
                            html5:true,
                            collapseWhitespace:true,
                            preserveLineBreaks:false,
                            minifyCSS:true,
                            removeComments:false
                        } 
                    })
                )
            }
            
        })
    return {
        entry,
        htmlWebpackPlugins
    }
}

const { entry,htmlWebpackPlugins} =  setMPA();
module.exports = {
    entry:entry,
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'[name]-server.js',
        libraryTarget:'umd'
    },
    module:{
        rules :[
            {
                test:/\.js$/,
                use:['babel-loader',"eslint-loader"]},
            {test:/\.css$/,use:[
                miniCssExtractPlugin.loader,
                'css-loader']
            },
            {test:/\.less$/,use:[
                miniCssExtractPlugin.loader,
                'css-loader',
                'less-loader',
                
                {
                    loader:'postcss-loader',
                    options:{
                        plugins:()=>[
                            require('autoprefixer')()
                        ]
                    }
                },
                {
                    loader:'px2rem-loader',
                    options: {
                        remUnit:75, //rem相对px的转换单位 1 rem = 75px
                        remPrecision:8 //px转rem 小数点位数
                    }
                }
            ]},
            {test:/\.(png|svg|jpg|gif)$/,use:[{
               loader: 'file-loader',
               options:{
                   name:'[name]_[hash:8].[ext]'
               } 
            }]},
            {test:/\.(woff|woff2|eot|ttf|otf)$/,use:[
                {
                    loader: 'file-loader',
                    options:{
                        name:'[name]_[hash:8].[ext]'
                    }
                }
                ]}
        ]
    },
    plugins:[
        new miniCssExtractPlugin({
            filename: 'name_[contenthash:8].css'
        }),
        new OptimizeCSSAssetsPlugin({
            assetNameRegExp:/\.css$/g,
            cssProcesssor:require('cssnano')
        }),
        new CleanWebpackPlugin()
        // ,new htmlWebExternalPlugin({
        //     externals:[
        //         {
        //             module:'react',
        //             entry:'https://unpkg.com/react@16/umd/react.production.min.js',
        //             global:'React'
        //         },
        //         {
        //             module:'react-dom',
        //             entry:'https://unpkg.com/react-dom@16/umd/react-dom.production.min.js',
        //             global:'ReactDOM'
        //         }
        //     ]
        // })
    ].concat(htmlWebpackPlugins),
    optimization:{
        splitChunks:{
            minSize:0,
            cacheGroups:{
                commons:{
                    test:/(react|react-dom)/,
                    name:'vendors',
                    chunks:'all'
                },
                commons:{
                    name:'commons',
                    chunks:'all',
                    minChunks:3
                }
            }
        }
    },
     //devtool:'eval'
    //  devtool:'inline-source-map',
    mode:"production"
   
}